<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/static/cherry-markdown/dist/cherry-markdown.min.css">
    <link rel="stylesheet" href="/static/cherry-markdown/katex.min.css">
    <script src="/static/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f8fafb;
        }
        #markdown {
            width: 80%;
            margin: auto;
        }
        @media (max-width:960px){
            #markdown {
                width: 90%;
            }
        }
        @media (max-width:768px){
            #markdown {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div id="markdown"></div>

    <script src="/static/cherry-markdown/dist/cherry-markdown.min.js"></script>

    <script>
        let cherry = new Cherry({
            id: "markdown",
            engine: {
                syntax: {
                    codeBlock: {
                        wrap: false,
                        lineNumber: true,
                        indentedCodeBlock: true,
                    },

                },
            },
            editor: {
                defaultModel: 'previewOnly',
            },
            toolbars: {
                toolbar: false,
            },
        });

        $.ajax({
            url: "/note/{{id}}/",
            method: "GET",
            success: res => {
                let content = res.content
                cherry.setValue("# " + res.title + "\n\n---\n\n" + content)
                $('title').text(res.title)
            }
        })
    </script>
</body>

</html>